<script setup>
import { ref } from 'vue'
defineProps({
  titles: {
    typeof: Array,
    default: () => []
  }
})
const emit = defineEmits(['tabClick'])
const currentIndex = ref(0)

function handleTabClick(index) {
  // console.log('index=>', index, 'currentIndex', currentIndex.value)
  currentIndex.value = index
  emit('tabClick', index)
}
</script>

<template>
  <view class="tab-control">
    <template v-for="(title, index) in titles" :key="index">
      <view
        :class="['tab-item', index === currentIndex ? 'active' : '']"
        @click="handleTabClick(index)"
      >
        <view class="title">{{ title }}</view>
      </view>
    </template>
  </view>
</template>

<style lang="scss">
.tab-control {
  display: flex;
  justify-content: space-between;
  /* border: 1px solid red; */
}
.tab-item {
  /* flex: 1; */
  padding: 10px 20px;
  margin: 5px;
  /* border: 1px solid green; */
  &.active {
    border-bottom: 3rpx solid pink;
    color: pink;
  }
  .title {
    font-size: 30rpx;
  }
}
</style>
